<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<style type="text/css">
			ul.list-group li{
				position: relative;
				left: 0;
				top: 0;
				cursor: pointer;
			}
			ul.list-group li:hover{

			}
			ul.list-group li:hover p{
				display:block;
				background-color: rgba(0,0,0,0.1);

			}
			
			ul.list-group li p{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;top: 0;
				line-height: 40px;
				text-align: center;
				color: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container">
			<cmt-box @func='loadComments'></cmt-box>
			<ul class="list-group">
				<li class="list-group-item" v-for="item in list" :key="item.id" @click="del(item.id)">
					<span class="badge">评论人：{{item.user}}</span>
					{{item.content}}
					<p>删除</p>
				</li>
			</ul>
		</div>
		
		<template id="tmpl">
			<div>
				<div class="form-group">
					<label >评论人：</label>
					<input type="text"  class="form-control" v-model="user"/>
				</div>
				<div class="form-group">
					<label>评论内容：</label>
					<textarea class="form-control" v-model="content" ></textarea>
				</div>
				<div class=" form-group">
					<input type="button" id="" value="发表评论" class="btn btn-info" @click="postComment"/>
				</div>
			</div>
		</template>
		<script type="text/javascript">
			var commentBox={
				template:"#tmpl",
				data(){
					return {
						user:"",
						content:""
					}
				},
				methods:{
					postComment(){
						if(this.user!=''&&this.content!='')
						{
							var comment={id:Date.now(),user:this.user,content:this.content}
							var list=JSON.parse(localStorage.getItem('cmts')||'[]')
							list.unshift(comment)
							localStorage.setItem('cmts',JSON.stringify(list))
							this.user=this.content=''
							this.$emit('func')
						}else{
							alert('用户名或内容未填写!')
							return 
						}
					}
						
				}
			}
			
			var vm=new Vue({
				el:"#app",
				data:{
					list:[
						{id:Date.now(),user:"老李",content:"aaaaaaaaa"},
						{id:Date.now(),user:"老李1",content:"aaaaaaaaa1"},
						{id:Date.now(),user:"老李2",content:"aaaaaaaaa1"}						
					]					
				},
				created(){
					this.loadComments()
				},
				methods:{
					loadComments(){
						var list=JSON.parse(localStorage.getItem('cmts')||'[]')
						this.list=list
					},
					del(id){
						var list=JSON.parse(localStorage.getItem('cmts')||'[]')
						var index=list.findIndex(item=>{
							if(item.id==id){
								return true;
							}
						})
						list.splice(index,1)
						localStorage.setItem('cmts',JSON.stringify(list))
						this.list=list
					}
				},
				components:{
					"cmt-box":commentBox
				}
			});
		</script>
	</body>
</html>
